<template>
  <v-ons-page>

    <div class="container">
      <v-ons-pull-hook
        class="pull-hook"
        :action="loadItem"
        @changestate="state = $event.state"
      >
        <span v-show="state === 'initial'"> 下拉刷新  </span>
        <span v-show="state === 'preaction'"> 释放 </span>
        <span v-show="state === 'action'"> 加载中... </span>
      </v-ons-pull-hook>

      <div class="data-list">
        <div class="data-list-item" v-for="item in 3">
          <div @click="enterPage({path:'/ServiceOrderDetail'})">
            <div class="head">
              <div class="left">
                <h3>帮我取</h3>
                <p>订单编号DD123456798</p>
              </div>
              <div class="right">
                <p class="type">订单金额40元</p>
                <p>发布于1分钟前</p>
              </div>
            </div>
            <div class="body">
              <!--<div class="info">
                <div class="info-item">
                  <h3><strong>40</strong>元</h3>
                  <p>本次收入</p>
                </div>
                <div class="info-item">
                  <h3><strong>50</strong>分钟内</h3>
                  <p>期望送达时间</p>
                </div>
              </div>-->
              <div class="address">
                <div class="address-item">
                  <img src="../../assets/resource/service/grab_order/icon1.png" alt="">
                  <p>地址1</p>
                </div>
                <div class="address-item">
                  <img src="../../assets/resource/service/grab_order/icon2.png" alt="">
                  <p>地址2</p>
                </div>
              </div>
              <div class="detail">
                <div class="detail-item">
                  <div class="side">送达时间</div>
                  <div>
                    2018-8-8 0:0:0 <span class="type">(立即送达)</span>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="side">订单内容</div>
                  <div>
                    送外卖送外卖送外卖送外卖送外卖送外卖送外卖送外卖送外卖送外卖送外卖
                  </div>
                </div>
                <div class="detail-item">
                  <div class="side">商品语音</div>
                  <div>
                    <div class="audio">
                      <i class="fa fa-rss"></i>
                      <span>10 "</span>
                    </div>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="side">商品图片</div>
                  <div class="img-wrap">
                    <img class="img" src="../../assets/resource/consumer/user/face.jpg" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="footer">
            <button @click="grabOrder">抢单</button>
          </div>
        </div>
      </div>


    </div>
  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        state: 'initial',
        items: [1, 2, 3]
      };
    },
    methods: {
      loadItem(done) {
        setTimeout(() => {
          this.items = [...this.items, this.items.length + 1];
          done();
        }, 600);
      },
      enterPage({path: path}) {
        this.$router.push({
          path: path
        });
      },
      grabOrder() {
        console.log("抢单");
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/grab-order.less";
</style>
